<template>
  <div style="min-height: 630px; background-color: rgba(255, 255, 255, 1)">
    <row>
      <div class="toolbar">
        <Button
          icon="ios-add"
          type="primary"
          @click="toAddPlugin"
          style="margin-right: 30px"
          v-if="Validation.check(Resources.SELF_MOTION_ADD)"
          >新增模式
        </Button>
        <Input
          v-model="bloc.model.selfMotion"
          style="width: 200px; margin-right: 5px"
          placeholder="自动程序名称"
        />
        <Input
          v-model="bloc.model.selfMotionEnglish"
          style="width: 200px; margin-right: 5px"
          placeholder="自动程序名称英文名称"
        />
        <Button
          icon="ios-search"
          type="primary"
          style="margin-right: 5px"
          @click="
            bloc.getModelSelfMotion(
              bloc.modelSelfMotion.pageIndex,
              bloc.modelSelfMotion.pageSize,
              'DESC',
              bloc.model
            )
          "
        >
          查询
        </Button>
        <Button icon="ios-refresh" @click="reset">重置</Button>
      </div>
    </row>
    <div>
      <Table
        border
        ref="selection"
        :columns="columns4"
        :data="bloc.modelSelfMotion.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              @click="toModifyItem(row.id)"
              type="info"
              v-if="Validation.check(Resources.SELF_MOTION_UPDATE)"
            >
              编辑
            </Button>
            <Button
              size="small"
              @click="toRemoveItem(row)"
              type="warning"
              v-if="Validation.check(Resources.SELF_MOTION_DELETE)"
            >
              删除
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.modelSelfMotion.itemCount"
            :current="bloc.modelSelfMotion.pageIndex"
            :page-size="bloc.modelSelfMotion.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="
              (val) =>
                bloc.getModelSelfMotion(
                  val,
                  bloc.modelSelfMotion.pageSize,
                  'DESC',
                  bloc.model
                )
            "
            @on-page-size-change="
              (val) => {
                bloc.modelSelfMotion.pageSize = val;
                bloc.getModelSelfMotion(1, val, 'DESC', bloc.model);
              }
            "
          />
        </slot>
      </Table>
    </div>
    <Modal
      title="确认提示"
      v-model="deleteConfirm"
      class-name="vertical-center-modal"
      @on-ok="removeItem(row)"
    >
      <div>
        <span>
          <h2>
            <Icon
              type="ios-help-circle-outline"
              size="48"
              color="rgba(255, 209, 145, 1)"
            />是否确定删除对应的记录
          </h2>
        </span>
        <p style="margin-left: 45px">是否确定删除对应的记录</p>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { AutomaticBloc } from './AutomaticBloc';
import { SeftMotion } from '@/base/model/SeftMotion';
import { Validation } from '@/base/Validation';
import { Resources } from '@/base/Resources';
import { formatDate } from '@/base/util/Dates';

@Component({
  components: {}
})
export default class extends Vue {
  @Prop({ type: Number })
  readonly init!: number;
  Validation = Validation;
  Resources = Resources;
  bloc = new AutomaticBloc();
  deleteConfirm: boolean = false;
  model1: any = '';
  model2: any = '';
  publisher: any = '';
  cityList: any = {
    1: '广州',
    2: '上海',
    3: '北京',
    4: '深圳',
    5: '杭州'
  };
  publishStatusList: any = {
    NOT_ISSUE: '未发布',
    ISSUE: '已发布'
  };
  columns4: any = [
    {
      type: 'selection',
      width: 60,
      align: 'left',
      tooltip: true
    },
    {
      title: '程序名称',
      key: 'selfMotion',
      align: 'left',
      tooltip: true
    },
    {
      title: '程序英文名',
      key: 'selfMotionEnglish',
      align: 'left',
      tooltip: true
    },
    {
      title: '程序编号',
      key: 'selfMotionId',
      align: 'left',
      tooltip: true
    },
    {
      title: '设备型号ID',
      key: 'deviceModelId',
      align: 'left',
      tooltip: true
    },
    {
      title: '更新时间',
      key: 'updated',
      align: 'left',
      tooltip: true,
      width: 160,
      render: (h: any, params: any) => {
        return h('span', {
          domProps: {
            innerText: formatDate(
              new Date(params.row.updated),
              'yyyy-MM-dd hh:mm:ss'
            )
          }
        });
      }
    },
    {
      title: '添加时间',
      key: 'created',
      align: 'left',
      tooltip: true,
      width: 160,
      render: (h: any, params: any) => {
        return h('span', {
          domProps: {
            innerText: formatDate(
              new Date(params.row.created),
              'yyyy-MM-dd hh:mm:ss'
            )
          }
        });
      }
    },
    {
      title: '操作',
      key: 'action',
      width: 47 * 2 + 61 * 0 + 75 * 0 + 20,
      align: 'left',
      slot: 'action',
      fixed: 'right'
    }
  ];

  private row: any;

  toAddPlugin() {
    this.$router.push({
      path: '/device/nav/add/program/',
      query: { id: this.$route.params.id, sortId: this.$route.query.sortId }
    });
  }

  toModifyItem(id) {
    this.$router.push({
      path: '/device/nav/edit/program/' + id,
      query: { id: this.$route.params.id, sortId: this.$route.query.sortId, programId: id}
    });
  }

  toRemoveItem(row) {
    // this.deleteConfirm = true;
    this.row = row;
    this.$Modal.confirm({
      title: '提示',
      content: '确认删除后将无法恢复！还要继续吗？',
      okText: '删除',
      cancelText: '取消',
      onOk: () => {
        this.bloc.removeItem(row).then((res) => {
          if (res.name === '') {
            this.$Message.success('模式删除成功');
          } else {
            this.$Message.error('模式删除失败');
          }
        });
      }
    });
  }

  removeItem(row) {}

  reset() {
    this.bloc.model = {
      id: 0,
      selfMotion: '',
      selfMotionEnglish: '',
      selfMotionId: '',
      deviceModelId: this.bloc.model.deviceModelId,
      created: '',
      updated: '',
    };
    this.bloc.getModelSelfMotion(
      this.bloc.modelSelfMotion.pageIndex,
      this.bloc.modelSelfMotion.pageSize,
      'DESC',
      this.bloc.model
    );
  }

  @Watch('edit')
  nameChanged(newVal: string, oldVal: string) {}

  handleSelectAll(status) {
    let el: any = this.$refs.selection;
    el.selectAll(status);
  }

  activated() {
    this.bloc.model.deviceModelId = Number(this.$route.params.id);
    this.bloc.getModelSelfMotion(
      this.bloc.modelSelfMotion.pageIndex,
      this.bloc.modelSelfMotion.pageSize,
      'DESC',
      this.bloc.model
    );
  }

}
</script>
<style lang="less" scoped>
</style>
